<template>
  <div>
    <div class="header">
      <HamburgerVue />
      <Breadcrumb />
      <!-- <Breadcrumb/> -->

      <div class="login">
        <div class="user-dropdown">
          <el-dropdown>
            <span class="el-dropdown-link">
              <span class="user-name">{{ username }}</span>
              <i class="el-icon-arrow-down el-icon--right"></i>
            </span>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item>
                <router-link to="/user" tag="span">个人中心</router-link>
              </el-dropdown-item>
              <el-dropdown-item>
                <div @click="logout">退出</div>
              </el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </div>
        <img class="user-avatar" src="../../assets/头像.gif" />
      </div>
    </div>
    <el-menu
      @open="handleOpen"
      @close="handleClose"
      :collapse="isCollapse"
      :default-active="currentIndex"
      class="el-menu-vertical-demo"
      background-color="rgb(48, 65, 86)"
      text-color="#fff"
      active-text-color="#ffd04b"
      router
    >
      <el-submenu index="1">
        <template slot="title">
          <i class="el-icon-s-order"></i>
          <span>项目基础信息</span>
        </template>
        <el-menu-item-group>
          <el-menu-item index="/project/Project">项目管理</el-menu-item>
          <el-menu-item index="/project/TunnelInfo">隧道管理</el-menu-item>
          <el-menu-item index="/project/direction">方向管理</el-menu-item>
          <el-menu-item index="/project/tunnelwidth">洞幅管理</el-menu-item>
          <el-menu-item index="/project/section">断面管理</el-menu-item>
        </el-menu-item-group>
      </el-submenu>

      <el-submenu index="2">
        <template slot="title">
          <i class="el-icon-eleme"></i>
          <span>隧道方案</span>
        </template>
        <el-menu-item-group>
          <el-menu-item index="/design/addrPlane">施工设计图</el-menu-item>
          <el-menu-item index="/design/build">施工方案</el-menu-item>
          <el-menu-item index="/design/monitoring">监测方案</el-menu-item>
          <!-- <el-menu-item index="/design/addrPlane">地质平面</el-menu-item>
          <el-menu-item index="/design/lining">衬砌设计</el-menu-item>
          <el-menu-item index="/design/vertical">纵断面图</el-menu-item>
          <el-menu-item index="/design/drawSupport">超前支护</el-menu-item>
          <el-menu-item index="/design/build">施工方案</el-menu-item>
          <el-menu-item index="/design/monitoring">监控量测</el-menu-item>  -->
        </el-menu-item-group>
      </el-submenu>
      <el-submenu index="3">
        <template slot="title">
          <i class="el-icon-help"></i>
          <span>工作监督管理</span>
        </template>
        <el-menu-item-group>
          <el-menu-item index="/unit/ConstructionUnit">建设单位管理</el-menu-item>
          <!-- <el-menu-item index="/TestMenagentAdmin">检测母体管理</el-menu-item> -->
        </el-menu-item-group>
      </el-submenu>
      <el-submenu index="4">
        <template slot="title">
          <i class="el-icon-platform-eleme"></i>
          <span>施工监控量测</span>
        </template>
        <el-menu-item-group>
          <el-menu-item index="/monitor/monitorInfo">拱顶下沉</el-menu-item>
          <el-menu-item index="/monitor/monitorfoot">拱脚下沉</el-menu-item>
          <el-menu-item index="/monitor/monitorperiphery">周边位移</el-menu-item>
          <el-menu-item index="/monitor/monitorsuface">地表下沉</el-menu-item>
          <el-menu-item index="/monitor/MonitorReport">报告管理</el-menu-item>
        </el-menu-item-group>
      </el-submenu>

      <el-submenu index="5">
        <template slot="title">
          <i class="el-icon-guide"></i>
          <span>超前地质预报</span>
        </template>
        <el-menu-item-group>
          <el-menu-item index="/geology/predictionInfo">预报成果管理</el-menu-item>
        </el-menu-item-group>
      </el-submenu>
      <el-submenu index="6">
        <template slot="title">
          <i class="el-icon-bank-card"></i>
          <span>施工质量检测</span>
        </template>
        <el-menu-item-group>
          <el-menu-item index="/construction/quailtyAdmin">初支检测报告</el-menu-item>
          <el-menu-item index="/construction/erchen">二衬检测报告</el-menu-item>
        </el-menu-item-group>
      </el-submenu>
      <el-submenu index="7">
        <template slot="title">
          <i class="el-icon-setting"></i>
          <span>系统信息管理</span>
        </template>
        <el-menu-item-group>
          <el-menu-item index="/system/personAdmin">人员管理</el-menu-item>
          <el-menu-item index="/system/etype">开挖方式</el-menu-item>
          <el-menu-item index="/system/syswarn">预警管理</el-menu-item>
          <el-menu-item index="/system/syswarnlog">预警日志</el-menu-item>
        </el-menu-item-group>
      </el-submenu>
    </el-menu>
  </div>
</template>

<script>
import api from "../../api";
import HamburgerVue from "./Hamburger.vue";
import Breadcrumb from "./Breadcrumb.vue";
import { mapState } from "vuex";
import jsCookie from "js-cookie";
export default {
  data() {
    return {
      username:"",
      currentIndex: "/BigData",
      isCollapse: false,
    };
  },
  components: {
    HamburgerVue,
    Breadcrumb,
  },
  //mounted是vue中的一个钩子函数，一般在初始化页面完成后，再对dom节点进行相关操作
  mounted() {
    this.currentIndex = this.$route.path;
    this.$bus.$on("toggleClick", (sf) => {
      this.isCollapse = !this.isCollapse;
    });
   this.username = jsCookie.get("username");
  },
  methods: {
    logout() {
      api.logout()
        .then((res) => {
          if (res.data.code == 2001) {
              jsCookie.remove("username");
              jsCookie.remove("token");
              localStorage.removeItem("tunnel");
              this.$router.push("/");
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
    handleOpen(key, keyPath) {
      console.log(key, keyPath);
    },
    handleClose(key, keyPath) {
      console.log(key, keyPath);
    },
  },
};
</script>

<style scoped>
.lang {
  margin-right: 10px;
}
.header {
  width: 100%;
  height: 50px;
  line-height: 50px;
  background: #fff;
  box-shadow: 0px 0px 5px 1px #999;
}

.header .user-name {
  margin-right: 10px;
  font-size: 15px;
  border: 1px solid #fff;
  display: inline-block;
  line-height: 40px;
  align-items: center;
}

.header .login {
  height: 50px;
  float: right;
  margin-right: 20px;
}

.header .login .item {
  height: 25px;
  margin-right: 30px;
}

.header .login .item i {
  display: block;
  font-size: 25px;
}

.el-menu-vertical-demo {
  position: fixed;
  left: 0;
  top: 0;
  bottom: 0;
  text-align: left;
  z-index: 1000;
}

.el-menu-item,
.el-menu-item-group {
  background-color: #1f2d3d !important;
}
.el-menu-item {
  color: rgb(191, 203, 217);
}

.el-submenu span {
  color: rgb(191, 203, 217);
  margin-left: 7px;
}
.el-submenu .el-menu-item {
  height: 50px;
  line-height: 50px;
  padding: 0 45px;
  min-width: 199px;
}
.login {
  position: absolute;
  right: 10px;
  top: 0px;
}
.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 200px;
  min-height: 400px;
}

.user-dropdown {
  float: right;
}
.user-avatar {
  float: right;
  width: 40px;
  height: 40px;
  margin-top:5px;
  margin-right: 10px;
  border-radius: 10px;
}
.el-breadcrumb {
  position: absolute;
  left: 250px;
  top: 20px;
}
</style>